<template>
    <div class="app">
      <button>原生的按钮</button><input type="text">
      <br>
      <zsj-datepicker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </zsj-datepicker>

    <zsj-datepicker
      v-model="value2"
      align="right"
      type="date"
      placeholder="选择日期"
      :picker-options="pickerOptions">
    </zsj-datepicker>

    <zsj-row>
          <zsj-button type="info" icon="el-icon-search" circle></zsj-button>
          <zsj-button type="primary" icon="el-icon-edit" circle></zsj-button>
          <zsj-button type="success" icon="el-icon-check" circle></zsj-button>
          <zsj-button type="info" icon="el-icon-message" circle></zsj-button>
          <zsj-button type="warning" icon="el-icon-star-off" circle></zsj-button>
          <zsj-button type="danger" icon="el-icon-delete" circle></zsj-button>
      </zsj-row>

    <zsj-popover
    placement="top-start"
    title="标题"
    width="200"
    trigger="hover"
    content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    <zsj-button slot="reference">hover 激活</zsj-button>
    </zsj-popover>

  <zsj-switch
  v-model="value"
  active-color="#13ce66"
  inactive-color="#ff4949">
  </zsj-switch>
    </div>  
</template>

<script>
    export default{
      name: "App",
      data() {
      return {
        visible: false,
        value: true,
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
      }
      },
    }
</script>

<style scoped>
   
</style>